<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天勤入职考核题</title>
    <link rel="stylesheet" href="./css/header.css">
    </link>
    <link rel="stylesheet" href="./css/content.css">
    </link>
    <link rel="stylesheet" href="./css/footer.css">
    </link>
    <link rel="stylesheet" href="./css/global.css">
    </link>
    <script src="./js/index.js"></script>
    <script src="./js/echarts.js"></script>
</head>

<body>
    <div>
        <!-- 头部区域 -->
        <div class="header">
            <!-- 版心区域 -->
            <div class="header_content">
                <!-- 左边LOGO区域 -->
                <div class="header_content_left">LOGO</div>
                <!-- 右边退出按钮及消息区域 -->
                <div class="header_content_right">
                    <!-- 设置及通知区域 -->
                    <div class="head_content_right_left">
                        <button class="head_content_right_left_button">
                            <img class="head_content_right_left_button_img" src="./images/shezhi.png" alt="">
                        </button>
                        <button class="head_content_right_left_button">
                            <img class="head_content_right_left_button_img" src="./images/tongzhi.png" alt="">
                        </button>
                    </div>
                    <!-- 退出登录按钮区域 -->
                    <div class="head_content_right_right">
                        <button class="head_content_right_right_button">Log Out</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <!-- 内容版心区域 -->
            <div class="content-center">
                <!-- 导航区域 -->
                <div class="content-center_nav">
                    <!-- 左边文字区域 -->
                    <div class="content-center_nav_left">
                        <img src="./images/LOGO.PNG" alt="">
                    </div>
                    <!-- 右边导航条区域 -->
                    <div class="content-center_nav_right">
                        <div class="content-center_nav_right_bottom">
                            <div id="nav1">DASHBOARO</div>
                            <div id="nav2">PROJECTS</div>
                            <div id="nav3">CALENDAR</div>
                            <div id="nav4">MAILBOX</div>
                            <div id="nav5">SETTINGS</div>
                        </div>
                    </div>
                </div>
                <!-- 轮播图数据区域 -->
                <div class="content-center_lm">
                    <!-- 轮播图 -->
                    <div class="content-center_lm_left">
                        <div class="slider">
                            <div class="slider-wrapper">
                                <img class="slider-wrapper_img" src="./images/01.jpeg" alt="Slider 1">
                                <img class="slider-wrapper_img" src="./images/02.jpg" alt="Slider 2">
                                <img class="slider-wrapper_img" src="./images/03.jpg" alt="Slider 3">
                                <img class="slider-wrapper_img" src="./images/04.jpg" alt="Slider 4">
                                <img class="slider-wrapper_img" src="./images/05.jpeg" alt="Slider 5">
                                <img class="slider-wrapper_img" src="./images/01.jpeg" alt="Slider 1">
                            </div>
                            <div class="slider-controls">
                                <span class="slider-prev">&#10094;</span>
                                <span class="slider-next">&#10095;</span>
                            </div>
                            <div class="slider-dots">
                                <span class="slider-dot slider-dot01"></span>
                                <span class="slider-dot slider-dot02"></span>
                                <span class="slider-dot slider-dot03"></span>
                                <span class="slider-dot slider-dot04"></span>
                                <span class="slider-dot slider-dot05"></span>
                            </div>
                        </div>
                    </div>
                    <!-- 右侧数据 -->
                    <div class="content-center_lm_right">
                        <div class="content-center_lm_right_top">
                            <div class="content-center_lm_right_top_left">Support Requests</div>
                            <div class="content-center_lm_right_top_right">View All</div>
                        </div>
                        <div class="content-center_lm_right_bottom">
                            <div class="content-center_lm_right_bottom_time">
                                <div class="content-center_lm_right_bottom_time_01">Time</div>
                                <div class="content-center_lm_right_bottom_time_02">9:45pm</div>
                                <div class="content-center_lm_right_bottom_time_03">9:45pm</div>
                            </div>
                            <div class="content-center_lm_right_bottom_name">
                                <div class="content-center_lm_right_bottom_name_01">USER NAME</div>
                                <div class="content-center_lm_right_bottom_name_02">info@design.com</div>
                                <div class="content-center_lm_right_bottom_name_03">info@design.com</div>
                            </div>
                            <div class="content-center_lm_right_bottom_status">
                                <div class="content-center_lm_right_bottom_status_01">STATUS</div>
                                <div class="content-center_lm_right_bottom_status_02">Solved</div>
                                <div class="content-center_lm_right_bottom_status_03">Solved</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 曲线图数据展示区域 -->
                <div class="content-center_quxiantu">
                    <div class="echarts" id="echarts"></div>
                </div>
                <!-- 饼状图柱状图展示区域 -->
                <div class="content-center_bz">
                    <div class="content-center_bz_left">
                        <div id="bingzhuangtu" class="bingzhuangtu"></div>
                    </div>
                    <div class="content-center_bz_right">
                        <div id="zhuzhuangtu" class="zhuzhuangtu"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 尾部区域 -->
        <div class="footer">
            <div class="footer_content">
                <div class="footer_content01">LOGO</div>
                <div class="footer_content02">
                    <ul>
                        <li>NEWS</li>
                        <li>CHANNELS</li>
                        <li>OVERVIEW</li>
                        <li>TIMELINE</li>
                    </ul>
                </div>
                <div class="footer_content03">
                    <ul>
                        <li>SPORT</li>
                        <li>CULTURE</li>
                        <li>NATURE</li>
                        <li>MUSIC</li>
                    </ul>
                </div>
                <div class="footer_content04">
                    <ul>
                        <li>WEATHER</li>
                        <li>AUTOS</li>
                        <li>LOCAL</li>
                        <li>SHOP</li>
                    </ul>
                </div>
                <div class="footer_content05">
                    <ul>
                        <li>FUTURE</li>
                        <li>FOOD</li>
                        <li>EARTH</li>
                        <li>TV</li>
                    </ul>
                </div>
                <div class="footer_content06">
                    <ul>
                        <li>TRAVEL</li>
                        <li>RADIO</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>